<template>
	<view style="padding-bottom: 20rpx;">
		<u-navbar title="第二步" :border-bottom='false' back-icon-size='48'></u-navbar>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
		<!-- 	<view class="linkWay">
			<view class="title">
				敏感信息提交
			</view>
			<view class="link-li">
				<view class="lable">
					联系人姓名
				</view>
				<input type="text" placeholder="请输入联系人姓名" />
			</view>
			<view class="link-li">
				<view class="lable">
					联系人手机
				</view>
				<input type="text" placeholder="请输入联系人手机" />
			</view>
			<view class="link-li">
				<view class="lable">
					店铺电话
				</view>
				<input type="text" placeholder="请输入店铺电话" />
			</view>
		</view> -->
		<!-- <u-gap height="20" bg-color="#F2F2F7"></u-gap> -->
		<view class="idCard">
			<view class="title">
				上传身份照片
			</view>
			<view class="cardBox">
				<view>
					<view class="cardBox-zheng" @click="idCardz" v-if="!idImgz">
						拍摄正面
					</view>
					<image v-else style="width: 276rpx;height: 240rpx;margin-right: 80rpx;"
						:src="'https://api.loveworldzh.com/'+idImgz" mode=""></image>
				</view>
				<view>
					<view class="cardBox-fan" @click="idCardf" v-if="!idImgf">
						拍摄背面
					</view>
					<image v-else style="width: 276rpx;height: 240rpx;" :src="'https://api.loveworldzh.com/'+idImgf"
						mode=""></image>
				</view>

			</view>
		</view>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
		<view class="license">
			<view class="title">
				营业执照
			</view>
			<view class="licenseBox">
				<view class="img-li" v-if="shopImg">
					<image class="icon" :src="'https://api.loveworldzh.com/'+shopImg" mode=""></image>
					<u-icon class='close' name="close-circle-fill" color="rgba(0, 0, 0, 0.32)" size="40"></u-icon>
				</view>
				<view class="add" @click="addImg">
					<image src="../../../../static/imgs/xiangji.png" mode=""></image>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F2F2F7"></u-gap>
		<view class="service">
			<view class="left">
				服务费比例
			</view>
			<view class="right" @click="showCost=true">
				<text v-if="server == ''">请选择</text>
				<text v-else>{{server +'%'}}</text>
				<u-icon style='margin-left: auto;' name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</view>
		<view class="next" @click="nextFn">
			下一步
		</view>
		<u-popup v-model="showCost" mode="bottom" closeable border-radius='24'>
			<view class="costPop">
				<view class="title">
					选择服务费比例
				</view>
				<view class="cost-ul">
					<view class="cost-li" @click="choose(8)">
						8%
					</view>
					<view class="cost-li" @click="choose(10)">
						10%
					</view>
					<view class="cost-li" @click="choose(12)">
						12%
					</view>
					<view class="cost-li" @click="choose(15)">
						15%
					</view>
					<view class="cost-li" @click="choose(20)">
						20%
					</view>
					<view class="cost-li" @click="choose(25)">
						25%
					</view>
					<view class="cost-li" @click="choose(30)">
						30%
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				showCost: false,
				shopObj: {},
				idImgz: '',
				idImgf: '',
				shopImg: '',
				server: ''
			}
		},
		onLoad() {
			this.shopObj = this.$store.state.shopStep
		},
		methods: {
			choose(val) {
				this.server = val
				this.showCost = false
			},
			// 营业执照
			addImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: function(res) {
						let imgFiles = res.tempFilePaths
						that.uploadImg(imgFiles, 2)
					}
				})
			},
			// 身份证正面
			idCardz() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: function(res) {
						let imgFiles = res.tempFilePaths
						that.uploadImg(imgFiles, 0)
					}
				})
			},
			// 身份证反面
			idCardf() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: function(res) {
						let imgFiles = res.tempFilePaths
						that.uploadImg(imgFiles, 1)
					}
				})
			},

			uploadImg(imgFiles, type) {
				let that = this
				uni.uploadFile({
					url: that.$baseURL + 'upload/up',
					filePath: imgFiles[0],
					name: 'file',
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data)
						if (obj.status) {
							if (type == 0) {
								that.idImgz = obj.path
							}
							if (type == 1) {
								that.idImgf = obj.path
							}
							if (type == 2) {
								that.shopImg = obj.path
							}
						}
					}
				});
			},

			async nextFn() {
				let {
					idImgz,
					idImgf,
					shopImg,
					server,
					shopObj
				} = this
				if (!idImgz || !idImgf || !shopImg || !server) {
					uni.showToast({
						title: '请填入完整信息',
						icon: 'none'
					})
					return
				}
				let res = await myRequest.jionShop({
					shop_name: shopObj.shopName,
					shop_cate_id: shopObj.shopTypeId,
					province_code: shopObj.province,
					city_code: shopObj.city,
					district_code: shopObj.district,
					address: shopObj.address,
					icon: shopObj.shopIcon,
					images: shopObj.images,
					content: shopObj.shopCont,
					tags: shopObj.tags,
					average_cost: shopObj.peoPrice,
					id_card_front: idImgz,
					id_card_back: idImgf,
					business_license: shopImg,
					service_charge_rate: server
				})
				if (res.status) {
					uni.showToast({
						title: '提交成功',
						success() {
							uni.navigateTo({
								url: './stepSan'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.linkWay {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 20rpx;

		.title {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.link-li {
			&:last-child {
				border-bottom: none
			}

			width: 100%;
			height: 88rpx;
			border-bottom: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;

			.lable {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				width: 30%;
			}

			input {
				height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.idCard {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 20rpx;

		.title {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.cardBox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 88rpx;
			margin-top: 20rpx;

			.cardBox-fan,
			.cardBox-zheng {
				width: 276rpx;
				height: 240rpx;
				text-align: center;
				padding-top: 194rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}

			.cardBox-zheng {
				margin-right: 80rpx;
				@include bgi('../../../../static/imgs/shenfenzzm.png');
			}

			.cardBox-fan {
				@include bgi('../../../../static/imgs/shenfenzfm.png');
			}
		}
	}

	.license {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding: 0 20rpx;

		.title {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.licenseBox {
			width: 100%;
			height: 232rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;

			.img-li {
				position: relative;
				width: 168rpx;
				height: 168rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;

				&:nth-child(4n) {
					margin-right: 0rpx;
				}

				.close {
					position: absolute;
					top: 6rpx;
					right: 6rpx;
					z-index: 99;
				}

				.icon {
					position: absolute;
					width: 168rpx;
					height: 168rpx;
				}
			}

			.add {
				width: 168rpx;
				height: 168rpx;
				background: #F2F2F7;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}
	}

	.service {
		padding: 0 20rpx;
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.next {
		width: 670rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
		border-radius: 16rpx;
		margin: 60rpx auto 0;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		color: #FFFFFF;
	}

	.costPop {
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.cost-ul {
			padding: 0 20rpx;

			.cost-li {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-bottom: 2rpx solid #F2F2F7;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
